<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		
		<u-navbar
			:title="teamInfo.teamName"
			leftText="返回"
			bgColor="#ffffff"
			@leftClick="leftClick"
			:autoBack="false"
		>
		</u-navbar>
		
		<view style="height: 190px;">
			<view class="teamBk" style="margin-top: 50px;padding: 15px;height: 110px;" :style="{backgroundImage: 'url(' + teamInfo.avatar + ')'}">
				
			</view>
			
			<view style="position: relative;top: 50px;padding: 15px;">
				<view style="font-weight: 600;font-size: 40rpx;font-family: monospace;margin-top: 30px;">{{teamInfo.teamName}}</view>
			</view>
		</view>
		
		<u-line margin="1px 0 10px 0"></u-line>
		<view style="padding: 0 15px;">
			<u-row>
				<u-col :span="6">
					<view v-if="isContent == false" style="margin: 0 auto;width: 99%;"><u-button text="详情" @click="isContent = true"></u-button></view>
					<view v-if="isContent == true" style="margin: 0 auto;width: 99%;"><u-button type="error" :plain="true" text="详情"></u-button></view>
				</u-col>
				<u-col :span="6">
					<view v-if="isContent == true" style="margin: 0 auto;width: 99%;"><u-button text="成员" @click="isContent = false"></u-button></view>
					<view v-if="isContent == false" style="margin: 0 auto;width: 99%;"><u-button type="error" :plain="true" text="成员"></u-button></view>
				</u-col>
			</u-row>
			<view v-if="isContent == true">
				<view class="itemName" style="margin-top: 40px;">团队基本信息</view>
				<view style="display: flex;flex-direction: row;margin-top: 12px;">
					<view class="smallTitle" style="width: 80px;">#ID：{{teamInfo.teamId}}</view>
					<view class="smallTitle">#最大人数：{{teamInfo.maxNum}}</view>
				</view>
				<view class="smallTitle" style="margin-top: 12px;">
					#创建时间：{{teamInfo.createTime}}
				</view>
				<view class="itemName" style="margin-top: 40px;">团队宣言</view>
				<view class="textarea">
					{{teamInfo.aim}}
				</view>
			</view>
			
			<view v-if="isContent == false" style="margin-top: 40px;">
				<u-line margin="15px 0 0 0"></u-line>
				<u-list >
					<u-list-item
						v-for="(item, index) in userList"
						:key="index"
					>
						<u-cell
							:title="item.userName"
						>
							<u-avatar
								slot="icon"
								shape="square"
								size="70"
								:src="item.userAvatar"
								customStyle="margin: -3px 5px -3px 0"
							></u-avatar>
						</u-cell>
					</u-list-item>
				</u-list>
			</view>
		</view>
		
		<u-modal :show="teamShow" content='确认退出该团队吗？' :showCancelButton='true' @confirm="unJoin" @cancel="teamShow = false"></u-modal>
		
		<u-button v-if="isTeam == false" type="success" text="申请加入" style="position: fixed;bottom: 0;" @click="joinTeam"></u-button>
		<u-button v-if="isTeam == true" type="warning" text="退出团队" style="position: fixed;bottom: 0;" @click="teamShow = true"></u-button>
	</view>
</template>

<script>
import { getTeamDetailAPI, isTeamApi, joinOrLeaveTeamApi } from '../../../utils/team';
	export default{
		data(){
			return{
				teamInfo: {},
				userList: [],
				isTeam: undefined,
				isContent: true,
				teamShow: false,
			}
		},
		methods: {
			leftClick(){
				// #ifdef H5
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				//使用vue-router返回上一级
				let a = this.$router.go(-1)
				if (a == undefined) {
					//重新定向跳转页面
					uni.reLaunch({
						url: '/pages/view/homepage/homepage'    
					})   
				}
				return;
				// #endif
				uni.navigateBack(1)
			},
			joinTeam(){
				let userId = uni.getStorageSync('userInfo').id
				let that = this
				joinOrLeaveTeamApi(userId,this.teamInfo.teamId).then(res => {
					if(res.code == 0){
						// console.log('加入成功',res.data,userId,that.teamInfo.teamId)
						isTeamApi(userId,that.teamInfo.teamId).then(res=> {
							if(res.code == 0){
								that.isTeam = res.data
								that.$refs.uToast.show({
									type: 'success',
									title: '加入成功',
									message: "加入成功",
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
								})
								// console.log('是否加入团队',res.data)
							}
						})
					}else{
						console.log('加入失败',res,userId,that.teamInfo.teamId)
					}
				})
			},
			unJoin(){
				this.teamShow = false
				let userId = uni.getStorageSync('userInfo').id
				let that = this
				joinOrLeaveTeamApi(userId,this.teamInfo.teamId).then(res => {
					if(res.code == 0){
						console.log('退出成功',res.data)
						isTeamApi(userId,that.teamInfo.teamId).then(res=> {
							if(res.code == 0){
								that.isTeam = res.data
								// console.log('是否加入团队',res.data)
								that.$refs.uToast.show({
									type: 'success',
									title: '退出成功',
									message: "退出成功",
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
								})
							}
						})
					}
				})
			}
		},
		onLoad: function(option) {
			let that = this
			let userId = uni.getStorageSync('userInfo').id
			getTeamDetailAPI(option.id).then(res=>{
				// console.log(res)
				if(res.code == 0){
					that.teamInfo = res.data
					that.teamInfo.createTime = that.teamInfo.createTime.slice(0,10)
					that.userList = res.data.userList
					isTeamApi(userId,that.teamInfo.teamId).then(res=> {
						if(res.code == 0){
							that.isTeam = res.data
							// console.log('是否加入团队',res.data)
						}
					})
				}
			})
		}
	}
</script>

<style scoped>
	.imgBk{
		width: 100%;
		height: 220px;
		margin-top: 43px;
		background-size: 100% 100%;
		padding: 10px;
	}
	.smallTitle{
		font-weight: 200;font-size: 27rpx;
	}
	.itemName{
		font-weight: 600;font-size: 35rpx;font-family: monospace;
	}
	.textarea{
		margin-top: 12px;border-color: #dadbde;border-width: 0.5px;border-style: solid;background-color: #f5f7fa;padding: 9px;min-height: 150px;
		font-weight: 200;font-size: 27rpx;
	}
	.teamBk{
		filter: blur(5px);
		z-index: 0;
		position: absolute;
		top: 0;
		width: 100%;
		background-size: 100% 100%;
	}
</style>